<template>
  <view class="min-h-screen bg-gray-50 relative font-sans">
    <!-- 状态栏占位 -->
    <view class="h-[44px] bg-white"></view>
    
    <!-- 顶部导航栏 -->
    <view class="bg-white shadow-sm sticky top-0 z-100 backdrop-blur-20">
      <view class="flex items-center justify-between py-[20px] px-[24px]">
        <view class="flex items-center gap-[10px] py-[8px] px-[12px] bg-orange-500/8 rounded-[12px] transition-all duration-300 active:bg-orange-500/12 active:scale-98">
          <IconFont name="location" size="20" color="#FF6B35" />
          <text class="text-[18px] font-700 text-gray-900 tracking-tight">北京市</text>
          <IconFont name="arrow-down" size="16" color="#666" />
        </view>
        
        <view class="flex items-center gap-[20px]">
          <view class="relative py-[12px] px-[12px] bg-orange-500/8 rounded-[12px] transition-all duration-300 active:bg-orange-500/12 active:scale-95">
            <IconFont name="message" size="22" color="#666" />
            <view class="absolute top-[4px] right-[4px] bg-gradient-to-br from-orange-500 to-orange-400 text-white text-[12px] font-700 w-[20px] h-[20px] rounded-full flex items-center justify-center shadow-sm">3</view>
          </view>
          <view class="w-[44px] h-[44px] rounded-full border-3 border-orange-500/20 transition-all duration-300 active:scale-95 active:border-orange-500 overflow-hidden">
            <image src="https://picsum.photos/id/64/100/100" mode="aspectFill" class="w-full h-full" />
          </view>
        </view>
      </view>
    </view>
    
    <!-- 主要内容 -->
    <scroll-view class="h-[calc(100vh-128px)]" scroll-y>
      <!-- 问候语和搜索 -->
      <view class="bg-gradient-to-br from-orange-500 to-orange-400 py-[40px] px-[24px] relative overflow-hidden">
        <!-- 装饰性圆圈 -->
        <view class="absolute top-[-50%] right-[-20%] w-[240px] h-[240px] bg-white/12 rounded-full animate-pulse"></view>
        <view class="absolute bottom-[-30%] left-[-10%] w-[180px] h-[180px] bg-white/8 rounded-full animate-pulse animation-delay-3s"></view>
        
        <view class="mb-[28px] relative z-2">
          <text class="block text-[32px] font-800 text-white mb-[8px] tracking-tight text-shadow-sm">你好，张小明</text>
          <text class="block text-[18px] text-white/90 font-500">今天想找什么工作？</text>
        </view>
        
        <view class="relative z-2">
          <view class="bg-white rounded-[28px] py-[16px] px-[20px] flex items-center gap-[16px] shadow-xl border-2 border-transparent transition-all duration-300 focus-within:border-white/30 focus-within:translate-y-[-2px] focus-within:shadow-2xl">
            <IconFont name="search" size="20" color="#999" />
            <input 
              class="flex-1 border-none outline-none text-[18px] text-gray-900 font-500 placeholder:text-gray-400 placeholder:font-400"
              placeholder="搜索职位、技能或公司"
              v-model="searchValue"
              @input="onSearchInput"
            />
          </view>
        </view>
      </view>
      
      <!-- 快速入口 -->
      <view class="py-[32px] px-[24px] animate-fade-in animation-delay-1">
        <view class="mb-[24px] flex items-end justify-between">
          <view>
            <text class="block text-[26px] font-800 text-gray-900 mb-[6px] tracking-tight">快速入口</text>
            <text class="block text-[16px] text-gray-600 font-500">选择你感兴趣的工作类型</text>
          </view>
        </view>
        
        <view class="grid grid-cols-2 gap-[20px]">
          <view class="bg-white rounded-[20px] py-[28px] px-[20px] flex flex-col items-center text-center shadow-sm border border-gray-100/50 transition-all duration-400 active:translate-y-[2px] active:scale-98 active:shadow-md relative overflow-hidden before:absolute before:top-0 before:left-0 before:right-0 before:h-[4px] before:bg-gradient-to-r before:from-transparent before:via-orange-500/30 before:to-transparent before:transform before:translate-x-[-100%] before:transition-transform before:duration-600 active:before:translate-x-[100%]" @tap="handleEntryClick('daily')">
            <view class="w-[68px] h-[68px] rounded-[20px] flex items-center justify-center mb-[16px] shadow-md bg-gradient-to-br from-indigo-500 to-purple-600">
              <IconFont name="calendar" size="28" color="#fff" />
            </view>
            <text class="text-[20px] font-700 text-gray-900 mb-[6px] tracking-tight">日结兼职</text>
            <text class="text-[15px] text-gray-600 font-500">灵活时间</text>
          </view>
          
          <view class="bg-white rounded-[20px] py-[28px] px-[20px] flex flex-col items-center text-center shadow-sm border border-gray-100/50 transition-all duration-400 active:translate-y-[2px] active:scale-98 active:shadow-md relative overflow-hidden before:absolute before:top-0 before:left-0 before:right-0 before:h-[4px] before:bg-gradient-to-r before:from-transparent before:via-orange-500/30 before:to-transparent before:transform before:translate-x-[-100%] before:transition-transform before:duration-600 active:before:translate-x-[100%]" @tap="handleEntryClick('reward')">
            <view class="w-[68px] h-[68px] rounded-[20px] flex items-center justify-center mb-[16px] shadow-md bg-gradient-to-br from-pink-500 to-red-500">
              <IconFont name="medal" size="28" color="#fff" />
            </view>
            <text class="text-[20px] font-700 text-gray-900 mb-[6px] tracking-tight">悬赏任务</text>
            <text class="text-[15px] text-gray-600 font-500">高额回报</text>
          </view>
          
          <view class="bg-white rounded-[20px] py-[28px] px-[20px] flex flex-col items-center text-center shadow-sm border border-gray-100/50 transition-all duration-400 active:translate-y-[2px] active:scale-98 active:shadow-md relative overflow-hidden before:absolute before:top-0 before:left-0 before:right-0 before:h-[4px] before:bg-gradient-to-r before:from-transparent before:via-orange-500/30 before:to-transparent before:transform before:translate-x-[-100%] before:transition-transform before:duration-600 active:before:translate-x-[100%]" @tap="handleEntryClick('skill')">
            <view class="w-[68px] h-[68px] rounded-[20px] flex items-center justify-center mb-[16px] shadow-md bg-gradient-to-br from-blue-500 to-cyan-400">
              <IconFont name="school" size="28" color="#fff" />
            </view>
            <text class="text-[20px] font-700 text-gray-900 mb-[6px] tracking-tight">技能提升</text>
            <text class="text-[15px] text-gray-600 font-500">学习成长</text>
          </view>
          
          <view class="bg-white rounded-[20px] py-[28px] px-[20px] flex flex-col items-center text-center shadow-sm border border-gray-100/50 transition-all duration-400 active:translate-y-[2px] active:scale-98 active:shadow-md relative overflow-hidden before:absolute before:top-0 before:left-0 before:right-0 before:h-[4px] before:bg-gradient-to-r before:from-transparent before:via-orange-500/30 before:to-transparent before:transform before:translate-x-[-100%] before:transition-transform before:duration-600 active:before:translate-x-[100%]" @tap="handleEntryClick('factory')">
            <view class="w-[68px] h-[68px] rounded-[20px] flex items-center justify-center mb-[16px] shadow-md bg-gradient-to-br from-green-500 to-emerald-400">
              <IconFont name="factory" size="28" color="#fff" />
            </view>
            <text class="text-[20px] font-700 text-gray-900 mb-[6px] tracking-tight">工厂招聘</text>
            <text class="text-[15px] text-gray-600 font-500">稳定工作</text>
          </view>
        </view>
      </view>
      
      <!-- 平台服务 -->
      <view class="bg-white rounded-t-[24px] mt-[-12px] relative z-1 shadow-sm py-[32px] px-[24px] animate-fade-in animation-delay-2">
        <view class="mb-[24px] flex items-end justify-between">
          <view>
            <text class="block text-[26px] font-800 text-gray-900 mb-[6px] tracking-tight">平台服务</text>
            <text class="block text-[16px] text-gray-600 font-500">为你提供全方位服务</text>
          </view>
        </view>
        
        <view class="flex flex-col gap-[16px]">
          <view class="rounded-[20px] py-[24px] px-[24px] flex items-center justify-between shadow-lg transition-all duration-400 relative overflow-hidden bg-gradient-to-br from-indigo-500 to-purple-600 active:scale-98 active:translate-y-[2px] active:shadow-md before:absolute before:top-0 before:left-[-100%] before:w-full before:h-full before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:transition-all before:duration-800 active:before:left-[100%]" @tap="handleServiceClick('merchant')">
            <view class="flex items-center flex-1">
              <view class="w-[56px] h-[56px] bg-white/25 rounded-[16px] flex items-center justify-center mr-[20px] shadow-sm">
                <IconFont name="category" size="24" color="#fff" />
              </view>
              <view class="flex-1">
                <text class="block text-[20px] font-700 text-white mb-[6px] tracking-tight text-shadow-sm">成为商家</text>
                <text class="block text-[16px] text-white/90 font-500 leading-[1.4]">发布任务，找到合适的人才</text>
              </view>
            </view>
            <view class="w-[40px] h-[40px] bg-white/25 rounded-full flex items-center justify-center shadow-sm">
              <IconFont name="arrow-right" size="16" color="#fff" />
            </view>
          </view>
          
          <view class="rounded-[20px] py-[24px] px-[24px] flex items-center justify-between shadow-lg transition-all duration-400 relative overflow-hidden bg-gradient-to-br from-pink-500 to-red-500 active:scale-98 active:translate-y-[2px] active:shadow-md before:absolute before:top-0 before:left-[-100%] before:w-full before:h-full before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:transition-all before:duration-800 active:before:left-[100%]" @tap="handleServiceClick('worker')">
            <view class="flex items-center flex-1">
              <view class="w-[56px] h-[56px] bg-white/25 rounded-[16px] flex items-center justify-center mr-[20px] shadow-sm">
                <IconFont name="user" size="24" color="#fff" />
              </view>
              <view class="flex-1">
                <text class="block text-[20px] font-700 text-white mb-[6px] tracking-tight text-shadow-sm">成为从业者</text>
                <text class="block text-[16px] text-white/90 font-500 leading-[1.4]">展示技能，接取高薪任务</text>
              </view>
            </view>
            <view class="w-[40px] h-[40px] bg-white/25 rounded-full flex items-center justify-center shadow-sm">
              <IconFont name="arrow-right" size="16" color="#fff" />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 热门推荐 -->
      <view class="py-[32px] px-[24px] animate-fade-in animation-delay-3">
        <view class="mb-[24px] flex items-end justify-between">
          <view>
            <text class="block text-[26px] font-800 text-gray-900 mb-[6px] tracking-tight">热门推荐</text>
          </view>
          <view class="flex items-center gap-[6px] py-[8px] px-[16px] bg-orange-500/8 rounded-[20px] transition-all duration-300 active:bg-orange-500/12 active:scale-98">
            <text class="text-[16px] text-orange-500 font-600">查看更多</text>
            <IconFont name="arrow-right" size="14" color="#FF6B35" />
          </view>
        </view>
        
        <view class="flex flex-col gap-[16px]">
          <view class="bg-white rounded-[16px] py-[20px] px-[20px] shadow-sm border border-gray-100/50 transition-all duration-300 active:translate-y-[1px] active:shadow-md">
            <view class="flex items-center justify-between mb-[12px]">
              <view class="bg-orange-500/12 text-orange-500 text-[14px] font-600 py-[6px] px-[12px] rounded-[12px]">设计</view>
              <view class="text-[20px] font-800 text-orange-500 tracking-tight">¥3000</view>
            </view>
            <text class="text-[20px] font-700 text-gray-900 mb-[6px] tracking-tight">UI设计师招聘</text>
            <text class="text-[16px] text-gray-600 mb-[12px] font-500">科技有限公司</text>
            <view class="flex gap-[10px] flex-wrap">
              <text class="bg-gray-50 text-gray-600 text-[14px] font-500 py-[6px] px-[12px] rounded-[8px] border border-gray-100/50">远程</text>
              <text class="bg-gray-50 text-gray-600 text-[14px] font-500 py-[6px] px-[12px] rounded-[8px] border border-gray-100/50">弹性</text>
            </view>
          </view>
          
          <view class="bg-white rounded-[16px] py-[20px] px-[20px] shadow-sm border border-gray-100/50 transition-all duration-300 active:translate-y-[1px] active:shadow-md">
            <view class="flex items-center justify-between mb-[12px]">
              <view class="bg-orange-500/12 text-orange-500 text-[14px] font-600 py-[6px] px-[12px] rounded-[12px]">技术</view>
              <view class="text-[20px] font-800 text-orange-500 tracking-tight">¥5000</view>
            </view>
            <text class="text-[20px] font-700 text-gray-900 mb-[6px] tracking-tight">前端开发</text>
            <text class="text-[16px] text-gray-600 mb-[12px] font-500">互联网公司</text>
            <view class="flex gap-[10px] flex-wrap">
              <text class="bg-gray-50 text-gray-600 text-[14px] font-500 py-[6px] px-[12px] rounded-[8px] border border-gray-100/50">Vue3</text>
              <text class="bg-gray-50 text-gray-600 text-[14px] font-500 py-[6px] px-[12px] rounded-[8px] border border-gray-100/50">全职</text>
            </view>
          </view>
          
          <view class="bg-white rounded-[16px] py-[20px] px-[20px] shadow-sm border border-gray-100/50 transition-all duration-300 active:translate-y-[1px] active:shadow-md">
            <view class="flex items-center justify-between mb-[12px]">
              <view class="bg-orange-500/12 text-orange-500 text-[14px] font-600 py-[6px] px-[12px] rounded-[12px]">运营</view>
              <view class="text-[20px] font-800 text-orange-500 tracking-tight">¥2500</view>
            </view>
            <text class="text-[20px] font-700 text-gray-900 mb-[6px] tracking-tight">新媒体运营</text>
            <text class="text-[16px] text-gray-600 mb-[12px] font-500">传媒公司</text>
            <view class="flex gap-[10px] flex-wrap">
              <text class="bg-gray-50 text-gray-600 text-[14px] font-500 py-[6px] px-[12px] rounded-[8px] border border-gray-100/50">兼职</text>
              <text class="bg-gray-50 text-gray-600 text-[14px] font-500 py-[6px] px-[12px] rounded-[8px] border border-gray-100/50">创意</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部占位 -->
      <view class="h-[30px]"></view>
    </scroll-view>
    
    <!-- 底部导航栏 -->
    <view class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200/80 flex h-[90px] py-[12px] z-100 backdrop-blur-20 shadow-sm">
      <view class="flex-1 flex flex-col items-center justify-center gap-[6px] transition-all duration-300 rounded-[12px] mx-[8px] bg-orange-500/8 active:scale-95">
        <IconFont name="home" size="22" color="#FF6B35" />
        <text class="text-[14px] text-orange-500 font-700">首页</text>
      </view>
      <view class="flex-1 flex flex-col items-center justify-center gap-[6px] transition-all duration-300 rounded-[12px] mx-[8px] active:scale-95 active:bg-orange-500/8">
        <IconFont name="search" size="22" color="#999" />
        <text class="text-[14px] text-gray-400 font-500">发现</text>
      </view>
      <view class="flex-1 flex flex-col items-center justify-center gap-[6px] transition-all duration-300 rounded-[12px] mx-[8px] active:scale-95 active:bg-orange-500/8">
        <IconFont name="plus" size="22" color="#999" />
        <text class="text-[14px] text-gray-400 font-500">发布</text>
      </view>
      <view class="flex-1 flex flex-col items-center justify-center gap-[6px] transition-all duration-300 rounded-[12px] mx-[8px] active:scale-95 active:bg-orange-500/8">
        <IconFont name="user" size="22" color="#999" />
        <text class="text-[14px] text-gray-400 font-500">我的</text>
      </view>
    </view>
    
    <!-- Toast 提示 -->
    <nut-toast 
      v-model:visible="showToast"
      :msg="toastMessage"
      :type="toastType"
      :duration="2000"
      @closed="onToastClosed"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'

// 搜索相关
const searchValue = ref('')

// Toast 相关
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('text')

// 搜索输入处理
const onSearchInput = (e) => {
  console.log('搜索输入:', e.detail.value)
}

// 快速入口点击
const handleEntryClick = (type) => {
  console.log('点击快速入口:', type)
  toastMessage.value = `点击了${type}入口`
  toastType.value = 'text'
  showToast.value = true
}

// 服务卡片点击
const handleServiceClick = (type) => {
  console.log('点击服务:', type)
  toastMessage.value = `点击了${type}服务`
  toastType.value = 'text'
  showToast.value = true
}

// Toast 关闭回调
const onToastClosed = () => {
  showToast.value = false
}
</script>

<style lang="scss" scoped>
@unocss-placeholder;
</style>    